<template>
  <div class="home">
    <div class="home_top">采购</div>
    <div class="cont">
      <div class="left">
        <ul>
          <li
            class="c_p"
            :class="active === index ? 'li1' : 'li'"
            v-for="(item, index) in shoptype"
            :key="item.id"
            @click="changetype(index, item.id)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>

      <div class="right">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            :finished="finished"
            @load="onLoad"
            v-model="loading"
            finished-text="没有更多了"
            :immediate-check="false"
          >
            <div class="aa" ref="aa">
              <div
                class="shop c_p"
                v-for="item in list"
                :key="item.id"
                @click="goshopinfo(item.id)"
              >
                <div class="img">
                  <img :src="item.image" alt />
                </div>
                <div class="info">
                  <div class="title">{{ item.title }}</div>
                  <div class="title1">{{ item.intro }}</div>
                  <div class="other">
                    <div class="price">￥{{ item.price }}/{{ item.unit }}</div>
                    <div class="img3" @click.stop="selectGoods(item.id)">
                      <img src="@/assets/home/gm.png" alt />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <!-- 选规格 -->
    <div class="zhezhaogg" v-show="isguige"></div>
    <div class="zhezhao2gg" :class="{ hide: !isguige, show: isguige }">
      <div class="tankuang2">
        <div class="top">
          <div class="name">{{ shopinfo.title }}</div>
          <div class="guanbi" @click="guanbi">
            <img src="@/assets/home/cha.png" alt />
          </div>
        </div>
        <div class="guige" v-show="specs.length !== 0">
          <div class="p4">规格</div>
          <div class="ggbtn">
            <div
              :class="activegg === item.id ? 'btn1' : 'btn2'"
              @click.stop="xuanguige(item.id)"
              v-for="item in specs"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="guige">
          <div class="p4">数量</div>
          <div class="num">
            <ul class="shuliangtianxie">
              <li class="num1">
                <div class="imgsa">
                  <img
                    src="@/assets/my/sub.png"
                    @click.stop="subtract()"
                    class="subaddbt"
                  />
                </div>
              </li>

              <li class="num1">
                <input
                  class="input"
                  @change="change($event)"
                  placeholder="请输入采购数量"
                  type="number"
                  v-model="btcount"
                  oninput="if(value>99999)value=99999"
                />
              </li>
              <li class="num1">
                <div class="imgsa">
                  <img
                    src="@/assets/my/plus.png"
                    @click.stop="add()"
                    class="subaddbt"
                  />
                </div>
              </li>
            </ul>

            <!--cristo-->
          </div>
        </div>
        <div class="yixuan">
          <div class="span1">
            已选规格：
            <span class="span2"
              >{{ specs.length === 0 ? shopinfo.title : specsinfo.name }}
              {{ btcount === "" ? 0 : btcount }}{{ shopinfo.unit }}</span
            >
          </div>
        </div>
        <div class="zong">
          <div class="left">
            <span class="p9">
              总计
              <span class="p8">
                ￥
                <span class="p7">{{ allprice }}</span
                ><!--{{allprice}}-->
              </span>
            </span>
          </div>
          <div class="right" @click="addCard">加入购物车</div>
          <!-- <div class="right" @click="addorder">确定采购</div> -->
        </div>
      </div>
    </div>
    <!-- 未入驻警告 -->
    <div class="zhezhao" v-if="isshow"></div>
    <div class="zhezhao1" v-if="isshow">
      <MySettled @quxiaotx="quxiaotx" @quruzhu="quruzhu"></MySettled>
    </div>
    <MyNavbar></MyNavbar>
  </div>
</template>

<script>
import MyNavbar from "@/components/MyNavbar";
import MyLogin from "@/components/MyLogin";
import Myspecs from "@/components/Myspecs";
import MySettled from "@/components/MySettled";
import Vue from "vue";
import axios from "axios";
import qs from "qs";
import store from "@/store/index";
export default {
  data() {
    return {
      active: 0,
      isshow: false, // 未入驻提示
      islogin: false, // 未登录
      id: 0,
      //商品分类
      shopid: 0,
      shoptype: [], //分类
      list: [], //分类商品
      loading: false, //是否在上拉加载
      isLoading: false, //是否在刷新
      finished: false, //是否加载完成
      page: 1,
      total: 0,
      raw: 20,
      token: "",
      state: 0, // 是否绑定 1绑定了，0未绑定
      code: "",
      settle_in: 0,
      userinfo: {},
      qwe: 0,
      shopinfo: {},
      isguige: false,
      specs: [],
      btcount: "",
      specsinfo: {},
      allprice: 0,
      activegg: 0,
    };
  },
  watch: {
    btcount: function (newVal, oldVal) {
      if (this.specsinfo.o_price) {
        if (this.specs.length === 0) {
          this.allprice = newVal * this.shopinfo.price;
        } else {
          this.allprice = newVal * this.specsinfo.o_price;
        }
      } else {
        this.$toast("请选择商品规格");
      }
    },
  },
  components: {
    MyNavbar,
    MyLogin,
    MySettled,
  },
  methods: {
    guanbi() {
      this.isguige = false;
    },
    addCard() {
      if (this.specs.length === 0) {
        if (this.num === 0) {
          this.$toast("商品数量不能为0");
        } else {
          axios
            .post(
              "/index/order/add",
              this.$qs.stringify({
                token: this.token,
                goods_id: this.id,
                price: this.shopinfo.price,
                num: this.btcount,
              })
            )
            .then((res) => {
              if (res.data.code === 1) {
                this.isguige = false;
                this.$toast("加入购物车成功");
                this.getCartNum()
              } else if (res.data.code === -10) {
                this.isshow = true;
                this.isguige = false;
              } else if (res.data.code === -1) {
                this.$toast("未登录");
                this.$router.replace("/home");
              } else {
                this.$toast(res.data.msg);
              }
            });
        }
      } else {
        if (
          Object.keys(this.specsinfo).length == 0 ||
          this.btcount === 0 ||
          this.btcount == ""
        ) {
          this.$toast("请选择商品规格并填写数量");
        } else {
          axios
            .post(
              "/index/Cart/goodsOperate",
              this.$qs.stringify({
                token: this.token,
                goods_id: this.id,
                num: this.btcount,
                specs_id: this.activegg,
              })
            )
            .then((res) => {
              if (res.data.code === 1) {
                this.isguige = false;
                this.$toast("加入购物车成功");
                this.getCartNum()
              } else if (res.data.code === -10) {
                this.isshow = true;
                this.isguige = false;
              } else if (res.data.code === -1) {
                this.$toast("未登录");
                this.$router.replace("/home");
              } else {
                this.$toast(res.data.msg);
              }
            });
        }
      }
    },
    xuanguige(id) {
      this.activegg = id;
      var specs = this.specs;
      this.specsinfo = specs.filter((item) => item.id === id)[0];
      this.btcount = this.btcount === "" ? 1 : this.btcount;
      if (this.specs.length === 0) {
        this.allprice = this.btcount * this.shopinfo.price;
      } else {
        this.allprice = this.btcount * this.specsinfo.o_price;
      }
    },
    selectGoods(id) {
      this.isguige = true;
      this.id=id
      this.btcount=1
      axios
        .post(
          "/index/goods/info",
          this.$qs.stringify({
            id: id,
            token: this.token,
          })
        )
        .then((res) => {
          if (res.data.code === 1) {
            this.shopinfo = res.data.data;
            this.allprice=0
            this.specs = res.data.data.specs;
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    add: function (btcount) {
      if (this.specsinfo.o_price) {
        this.btcount++;
      } else {
        this.$toast("请选择商品规格");
      }
    },
    subtract: function (btcount) {
      if (this.btcount <= 1) {
        this.$toast("采购数量无法再减少");
        // this.btcount=1;
      } else {
        this.btcount -= 1;
      }
    },

    changetype(index, id) {
      this.active = index;
      this.id = id;
      this.onRefresh();
    },
    quxiaotx() {
      this.isshow = false;
    },
    goquxiao() {
      this.islogin = false;
    },
    quruzhu() {
      this.$router.push("/settlement");
    },
    // 商品详情
    goshopinfo(id) {
      if (this.settle_in == 0) {
        this.isshow = true;
      } else {
        this.$router.push(`/shopinfo/${id}`);
      }
    },
    // 允许授权
    // yunxushq() {
    //   this.getCode();
    //   this.islogin = false;
    // },
    // 下拉刷新
    onRefresh() {
      this.page = 1;
      this.finished = false;
      this.getList();
    },
    //上拉加载
    onLoad() {
      // 异步更新数据
      console.log("加载");
      this.page++;
      axios
        .post(
          "/index/goods/goods_list",
          this.$qs.stringify({
            classify_id: this.id,
            page: this.page,
          })
        )
        .then((res) => {
          var list1 = res.data.data.data;
          this.total = res.data.total;
          this.list = [...this.list, ...list1];
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (this.list.length >= this.total) {
            this.finished = true;
          }
        });
    },
    getList() {
      axios
        .post(
          "/index/goods/goods_list",
          this.$qs.stringify({
            classify_id: this.id,
            page: this.page,
          })
        )
        .then((res) => {
          this.list = res.data.data.data;
          this.total = res.data.data.total;
          this.isLoading = false;
          if (this.list.length >= this.total) {
            this.finished = true;
          }
        });
    },

    getCode() {
      // 非静默授权，第一次有弹框
      this.code = "";
      this.code = this.getUrlCode().code; // 截取code
      if (this.code == null || this.code === "") {
        axios.post("index/index/wxLogin").then((res) => {
          var http = res.data.data;
          window.localStorage.clear();
          window.location.href = http;
        });
      } else {
        // 你自己的业务逻辑
      }
      axios
        .post(
          "index/index/index",
          this.$qs.stringify({
            code: this.code,
          })
        )
        .then((res) => {
          window.localStorage.setItem("token", res.data.data.token);
          window.localStorage.setItem("state", res.data.data.state);
          this.token = window.localStorage.getItem("token");
          this.state = window.localStorage.getItem("state");
          if (res.data.data.state == 0) {
            this.$router.push("/bindingnumber");
          }
        });
    },
    getUrlCode() {
      // 截取url中的code方法
      var url = location.search;
      this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    },
    getCartNum(){
      axios
      .post(
        "/index/cart/cartNum",
        this.$qs.stringify({
          token: localStorage["token"],
        })
      )
      .then((res) => {
        if (res.data.code === 1) {
          store.commit('setCartNum',res.data.data.cart.cart_num)
        }
      });
    }
  },
  created() {
    this.onRefresh();
    this.getCartNum()
  },
  mounted() {
    if (
      !window.localStorage.getItem("token") ||
      window.localStorage.getItem("token") == "undefined" ||
      window.localStorage.getItem("token") == -1
    ) {
      this.code = "";
      // this.getCode();
    }
    this.state = window.localStorage.getItem("state");
    this.token = window.localStorage.getItem("token");
    this.settle_in = window.localStorage.getItem("settle_in");
    if (
      this.state == 0 &&
      this.token != -1 &&
      this.token != "undefined" &&
      this.token != ""
    ) {
      this.$router.push("/bindingnumber");
    }
    axios
      .post("/index/goods/classify", this.$qs.stringify({ token: this.token }))
      .then((res) => {
        if (res.data.code === 1) {
          this.shoptype = res.data.data;
          this.id = res.data.data[0].id;
          this.getList();
        } else {
          this.$toast(res.data.msg);
        }
      });

    axios
      .post(
        "/index/user/info",
        this.$qs.stringify({
          token: this.token,
        })
      )
      .then((res) => {
        this.userinfo = res.data.data.user;
        window.localStorage.setItem("settle_in", res.data.data.user.store_id);
        this.settle_in = res.data.data.user.store.status;
      });

    var winHeight = document.documentElement.clientHeight; //视口大小
    // document.getElementById("aa").style.minHeight = winHeight - 82 + "px"; //调整上拉加载框高度
    this.$refs.aa.style.minHeight = winHeight - 82 + "px";
  },
};
</script>
<style lang="scss" scoped>
.c_p {
  cursor: pointer;
}
.home {
  width: 100%;
  height: 100vh;
  .home_top {
    width: 100%;
    height: 44px;
    font-size: 18px;
    background: #ffffff;
    box-shadow: 0px 1px 0px 0px #eeeeee;
    font-family: PingFang SC;
    font-weight: bold;
    color: #323232;
    line-height: 44px;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
  }
  .cont {
    width: 100%;
    height: auto;
    margin-top: 1px;
    display: flex;
    display: -webkit-flex;
    position: relative;
    .left {
      width: 85px;
      position: fixed;
      left: 0;
      top: 45px;
      ul {
        width: 100%;
        background: #f5f5f5;
      }
      .li {
        margin-left: 5px;
        width: 80px;
        height: 50px;
        font-size: 13px;
        background: #f5f5f5;
        font-family: PingFang SC;
        font-weight: 500;
        color: #555555;
        line-height: 50px;
        padding-left: 10px;
      }
      .li1 {
        margin-left: 5px;
        width: 80px;
        height: 50px;
        border-radius: 5px 0px 0px 25px;
        background: white;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 50px;
        padding-left: 10px;
      }
    }
    .right {
      width: 265px;
      margin-left: 10px;
      position: absolute;
      right: 10px;
      top: 0;
      margin-top: 45px;
      margin-bottom: 50px;
      .shop {
        width: 100%;
        height: 115px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .img {
          width: 100px;
          height: 100px;
          margin-right: 10px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .info {
          width: 160px;
          .title {
            width: 100%;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #212426;
            line-height: 16px;
            margin-top: 13px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .title1 {
            width: 100%;
            font-size: 11px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            line-height: 11px;
            margin-top: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .other {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 29px;
            .price {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ff511e;
              line-height: 14px;
            }
            .img3 {
              width: 26px;
              height: 26px;
              display: flex;
              display: -webkit-flex;
              justify-content: center;
              align-items: center;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
  .zhezhao {
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19;
  }
  .zhezhao1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19;
  }

  .zhezhao3 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
  }
  .aaa {
    position: relative;
    bottom: 49px;
    left: 0;
    width: 100%;
    height: 49px;
  }
}

.zhezhaogg {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 19;
}
.zhezhao2gg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  .tankuang2 {
    width: 330px;
    background: #ffffff;
    border-radius: 10px;
    .top {
      width: 100%;
      height: 49px;
      position: relative;
      text-align: center;
      .name {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        line-height: 49px;
      }
      .guanbi {
        width: 18.5px;
        height: 18.5px;
        position: absolute;
        top: 5px;
        right: 5px;
        img {
          width: 18.5px;
          height: 18.5px;
        }
      }
    }
    .guige {
      .p4 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 15px;
      }
      .ggbtn {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
        .btn1 {
          width: 90px;
          height: 37px;
          background: #fdd40a;
          border-radius: 18.5px;
          margin-left: 15px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #222222;
          line-height: 37px;
          text-align: center;
          margin-top: 10px;
          overflow: hidden;
        }
        .btn2 {
          width: 90px;
          height: 37px;
          background: #ececec;
          border-radius: 18.5px;
          margin-left: 15px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #555555;
          line-height: 37px;
          text-align: center;
          margin-top: 10px;
          overflow: hidden;
        }
      }
      .num {
        width: 300px;
        margin: auto;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #d3d3d3;
        .input {
          width: 100%;
          border: none;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 20px;
          padding: 0 10px;
          box-sizing: border-box;
        }
        .shuliangtianxie {
          .num1 {
            list-style: none;
            float: left;
            text-align: center;
            .input {
              width: 100%;
              height: 100%;
              border: none;
              font-size: 15px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 20px;
              padding: 0 10px;
            }
            .imgsa {
              width: 26px;
              height: 26px;
            }
            .subaddbt {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .yixuan {
      width: 327px;
      height: 33px;
      margin: 22.5px 0 0 0;
      background: #f9f9f9;
      border: 1px solid #e5e5e5;
      .span1 {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 33px;
        margin-left: 15px;
        .span2 {
          color: #222222;
        }
      }
    }
    .zong {
      width: 300px;
      margin: 15px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .p9 {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          line-height: 14px;
          .p8 {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ff511e;
            line-height: 12px;
            .p7 {
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #ff511e;
              line-height: 18px;
            }
          }
        }
      }
      .right {
        width: 90px;
        height: 40px;
        background: #fdd40a;
        border-radius: 20px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}

.hide {
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.show {
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
</style>
